<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function () {
		var oText = document.getElementById('text1');
		var oBtn = document.getElementById('btn');
		var oUl = document.getElementById('ul1');

		oBtn.onclick = function () {
			/*
				document.createElement('元素名称')		元素的创建		*** 是document可不可以是父级 ***
			*/

			var oLi = document.createElement('li');
			//oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>'

			var oA = document.createElement('a');
			oA.innerHTML = '删除';
			oA.href = 'javascript:;';
			oLi.innerHTML = oText.value;
			//oLi.innerHTML = oText.value + oA;		这样写是错误的。innerHTML都是字符串，oA不是字符串

			oA.onclick = function (){

				/*
					(要删除的元素的)父级.removeChild(要删除的元素)		元素的删除
				*/

				oUl.removeChild( this.parentNode );		//oUl.removeChild('li');错误都写法
			}

			/*
				父级.appendChild(要添加的元素)					后面添加
			*/

			/*
				父级.insertBefore(新的元素，被插入的元素)		中间插入
					如果第二个参数的节点不存在：
						IE：报错
						其他标准浏览器：会以appendChild的形式添加
			*/

			//oLi.innerHTML = oText.value + oA;		这样写是错误的。innerHTML都是字符串，oA不是字符串
			oText.value = '';
			oLi.appendChild( oA );
			//oUl.appendChild( oLi );		//旧的li在最上面，新的li在下面
			if (oUl.children[0]) {
				oUl.insertBefore( oLi, oUl.children[0] );
			}else{
				oUl.appendChild( oLi );
			};
		}
	}
	</script>
</head>
<body>
	<input id="text1" type="text" >
	<input id="btn" type="button" value="留言" />
	<ul id="ul1"></ul>
</body>
</html>